<template>
  <div class="quota-list">
    <div v-for="(industry, index) in sort()" :key="industry.name" class="industry-group">
      <div class="industry-name">
        <SvgIcon style="font-size: 20px" :icon-class="INDUSTRY_ICON_MAP[industry.name] || ''" />
        <div>
          {{ industry.name }}
        </div>
      </div>

      <!-- v-for second-module -->
      <div
        v-for="secondModule in industry.children"
        :key="secondModule.name"
        class="second-modules"
      >
        <div class="second-module-name">
          {{ secondModule.name }}
        </div>
        <!-- v-for quota item -->

        <div class="quota-item-wrapper">
          <template v-for="(quota, index2) in secondModule.children" :key="quota.id">
            <QuotaItemSm
              v-if="smItemNames.includes(quota.quotaName)"
              :quota="quota"
              bg-color="green"
              class="home-quota-item"
            />
            <QuotaItem
              v-else
              :quota="quota"
              class="home-quota-item"
              :bg-color="getBgColor(index, index2)"
            />
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { useQuotaStore } from '@/store'

import QuotaItem from '@/components/QuotaItem/index.vue'
import QuotaItemSm from '@/components/QuotaItem/sm.vue'
import SvgIcon from '@/components/SvgIcon'

const INDUSTRY_ICON_MAP: IObject<string> = {
  基础信息: 'jichu',
  运行信息: 'yunxing',
  管理信息: 'guanlixinxi',
  服务信息: 'guanlixinxi',
  安全信息: 'guanlixinxi'
  // 管理信息: 'guanlixinxi'
}

const quotaStore = useQuotaStore()
const { quotaTree } = storeToRefs(quotaStore)
console.log(quotaTree, 8888888888)

const sort = () => {
  let arr = [
    {
      name: '基础信息',
      children: []
    },
    {
      name: '运行信息',
      children: []
    },
    {
      name: '管理信息',
      children: []
    },
    {
      name: '服务信息',
      children: []
    },
    {
      name: '安全信息',
      children: []
    },
    {
      name: 'other',
      children: []
    }
  ]
  let name = ['基础信息', '运行信息', '管理信息', '服务信息', '安全信息']
  quotaTree.value.map(m => {
    if (name.includes(m.name)) {
      arr.map(a => {
        if (m.name == a.name) {
          a.children.push(...m.children)
        }
      })
    } else {
      arr[arr.length - 1].children.push(...m.children)
    }
  })
  let list = []
  arr.map(m => {
    if (m.children.length > 0) {
      list.push(m)
    }
  })
  console.log(list, 9999999)
  return list
}

// 为演示写死的逻辑
// const itemSize = computed(() => {
const smItemNames = ['机扫面积', '洒水面积', '冲洗面积']
// return smItemNames.includes(props.quota.quotaName) ? 'sm' : 'normal'
// })

// 获取一个小模块QuotaItem的背景颜色
const getBgColor = (index: number, index2: number) => {
  const maxNum = Math.max(index, index2)
  if (maxNum % 3 === 0) {
    return 'blue'
  }
  if (maxNum % 2 === 0) {
    return 'green'
  }
  return 'orange'
}
</script>

<style lang="less" scoped>
.quota-list {
  padding: 0px 23px;

  .industry-group {
    margin-top: 17.63px;
    background: #f5f5f5;
    border-radius: 10px 7.69px;
    padding: 8px;

    .industry-name {
      color: #0f77ed;
      font-size: 13.46px;
      line-height: 1;
      display: flex;
      align-items: center;
    }

    .second-modules {
      .second-module-name {
        margin-top: 17.62px;
        font-weight: bold;
        color: #444444;
        font-size: 12.18px;
      }
    }
  }

  .quota-item-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .home-quota-item {
    margin-top: 7.69px;
  }
}
</style>
